<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="tableList"
      :pagination="false"
      :scroll="{ x: 1500 }"
    >
      <!-- 接收时间-->
      <span slot="createTime" slot-scope="text, record">
        {{
          record.createTime === null || record.createTime === ""
            ? "暂无"
            : record.createTime.replace("T", " ")
        }}
      </span>
      <!-- 结算时间-->
      <span slot="settlementTime" slot-scope="text, record">
        {{
          record.settlementTime === null || record.settlementTime === ""
            ? "暂无"
            : record.settlementTime.replace("T", " ")
        }}
      </span>
      <!-- 状态-->
      <span slot="state" slot-scope="text, record">
        <span style="color: #3eae7c">
          {{ record.state }}
        </span>
      </span>
      <!-- 备注-->
      <span slot="remark" slot-scope="text, record">
        {{ record.remark === null ? "暂无" : record.remark }}
      </span>
      <!-- 创建时间-->
      <span slot="updateTime" slot-scope="text, record">
        {{
          record.updateTime === null || record.updateTime === ""
            ? "暂无"
            : record.updateTime.replace("T", " ")
        }}
      </span>
      <span slot="action" slot-scope="text, record">
        <a
          href="javascript:;"
          style="text-decoration: underline; color: rgb(41, 41, 224)"
          @click="showModal(record)"
          >账单详情
        </a>
      </span>
    </a-table>
    <!-- //账单详情 -->
    <a-modal v-model="visible" title="账单详情">
      <template slot="footer">
        <a-button
          v-if="
            modalData.rechargeState === '5' &&
            port != 'client' &&
            accType * 1 != 2
          "
          :loading="loadingSendBack"
          @click="sendBack"
          style="background: red; color: #fff; border: none"
          >退回申请</a-button
        >
        <a-button
          v-if="
            modalData.rechargeState === '5' &&
            port != 'client' &&
            accType * 1 != 2
          "
          :loading="loading"
          @click="onSubmitCredited"
          type="primary"
          >确认结算</a-button
        >
        <a-button
          v-if="
            modalData.rechargeState != '5' ||
            port === 'client' ||
            accType * 1 == 2
          "
          @click="visible = false"
          style="background: #d7d7d7; color: #fff; border: none"
          >取消</a-button
        >
      </template>
      <!-- //入账 -->
      <div v-if="port != 'client' && modalData.rechargeType == '1'">
        <p>客户编号：{{ modalData.tenantId }}</p>
        <p>申请人：{{ modalData.createByName }}</p>
        <p>入账/扣费：{{ modalData.rechargeType === "1" ? "入账" : "扣费" }}</p>
        <p>金额：{{ (modalData.cost * 1).toFixed(4) }}</p>
        <p>
          收款账号：{{
            modalData.paymentAccount === null
              ? "暂无"
              : modalData.paymentAccount
          }}
        </p>
        <p>
          转账账号：{{
            modalData.transferAccount === null
              ? "暂无"
              : modalData.transferAccount
          }}
        </p>
        <p>
          交易流水号：{{
            modalData.serialNumber === null ? "暂无" : modalData.serialNumber
          }}
        </p>
        <p>入账币种：{{ modalData.currency }}</p>
        <p>结算币种：{{ modalData.settlementCurrency }}</p>
        <p>
          客户备注：{{ modalData.remark === null ? "暂无" : modalData.remark }}
        </p>
        <div>
          <p>
            汇率：

            <!-- <a-input-number
              v-if="modalData.rechargeState === '5'"
              @change="changeRate"
              :precision="4"
              v-model="exchangeRate"
              style="width: auto"
              :min="0.001"
            /> -->
            <span>
              {{ (exchangeRate * 1).toFixed(4) }}   <span style="color:red"> *(注:入账兑换结算币种汇率) </span>
            </span>
          </p>
          <p>
            实际结算金额：
            <a-input-number
              v-if="modalData.rechargeState === '5'"
              :precision="4"
              v-model="modalData.settlementCost"
              style="width: auto"
              :min="1"
            />
            <span v-else>
              {{ (modalData.settlementCost * 1).toFixed(4) }}
            </span>
            {{ modalData.settlementCurrency }}
          </p>
          <div>
            <span>审核备注：</span>
            <a-textarea
              v-if="modalData.rechargeState === '5'"
              v-model="modalData.auditRemark"
              style="width: 80%"
              :auto-size="{ minRows: 3, maxRows: 5 }"
              :maxLength="256"
            />
            <span v-else style="word-wrap: break-word; word-break: break-all">
              {{ modalData.auditRemark || "暂无" }}
            </span>
          </div>
        </div>
      </div>
      <div v-if="port === 'client' && modalData.rechargeType == '1'">
        <p>
          收款账号：{{
            modalData.paymentAccount === null
              ? "暂无"
              : modalData.paymentAccount
          }}
        </p>
        <p>
          转账账号：{{
            modalData.transferAccount === null
              ? "暂无"
              : modalData.transferAccount
          }}
        </p>
        <p>
          交易流水号：{{
            modalData.serialNumber === null ? "暂无" : modalData.serialNumber
          }}
        </p>
        <p>充值币种：{{ modalData.currency }}</p>
        <p>充值金额：{{ (modalData.cost * 1).toFixed(4) }}</p>
        <p>结算币种：{{ modalData.settlementCurrency }}</p>
        <p>
          结算金额：{{ (modalData.settlementCost * 1).toFixed(4) }}
          {{ modalData.settlementCurrency }}
        </p>
        <p>
          客户备注：{{ modalData.remark === null ? "暂无" : modalData.remark }}
        </p>
      </div>
      <!-- //扣费 -->
      <div v-if="port != 'client' && modalData.rechargeType == '2'">
        <p>客户编号：{{ modalData.tenantId }}</p>
        <p>申请人：{{ modalData.createByName }}</p>
        <p>入账/扣费：{{ modalData.rechargeType === "1" ? "入账" : "扣费" }}</p>
        <p>费用项：{{ modalData.costType }}</p>
        <p>申请金额：{{ (modalData.cost * 1).toFixed(4) }}</p>
        <p>入账币种：{{ modalData.currency }}</p>
        <p>
          客户备注：{{ modalData.remark === null ? "暂无" : modalData.remark }}
        </p>
        <div>
          <p>
            实际结算金额：
            <a-input-number
              v-if="modalData.rechargeState === '5'"
              :precision="4"
              v-model="modalData.cost"
              style="width: auto"
              :min="1"
            />
            <span v-else>
              {{ (modalData.cost * 1).toFixed(4) }}
            </span>
            {{ modalData.currency }}
          </p>
          <div>
            <span>审核备注：</span>
            <a-textarea
              v-if="modalData.rechargeState === '5'"
              v-model="modalData.auditRemark"
              style="width: 80%"
              :auto-size="{ minRows: 3, maxRows: 5 }"
              :maxLength="256"
            />
            <span v-else style="word-wrap: break-word; word-break: break-all">
              {{ modalData.auditRemark || "暂无" }}
            </span>
          </div>
        </div>
      </div>
      <div v-if="port === 'client' && modalData.rechargeType == '2'">
        <p>入账/扣费：{{ modalData.rechargeType === "1" ? "入账" : "扣费" }}</p>
        <p>费用项：{{ modalData.costType }}</p>
        <p>申请金额：{{ (modalData.cost * 1).toFixed(4) }}</p>
        <p>入账币种：{{ modalData.currency }}</p>
        <p>
          客户备注：{{ modalData.remark === null ? "暂无" : modalData.remark }}
        </p>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {
  recharge_info,
  recharge_settlement,
  recharge_sendBack,
} from "@/apis/system/FinanceManagement/FinanceManagement";
// import Demo from './demo.vue'
export default {
  props: ["tableList", "getTableList", "port"],

  data() {
    return {
      loadingSendBack: false,
      loading: false,
      visible: false,
      modalData: {},
      accType: sessionStorage.getItem("accType"),
      exchangeRate: null,
    };
  },
  methods: {
    // //改变汇率
    // changeRate() {
    //   this.modalData.settlementCost = this.modalData.cost * this.exchangeRate;
    // },
    //退回
    sendBack() {
      this.loadingSendBack = true;
      let _this = this;
      this.$confirm({
        title: `确定要退回申请编号为${_this.modalData.rechargeCode}的订单?`,
        cancelText: "取消",
        okText: "确定",
        onOk() {
          return new Promise((resolve) => {
            setTimeout(async () => {
              let { code, message } = await recharge_sendBack(
                _this.modalData.id
              );
              if (code === "10000") {
                resolve();
                _this.visible = false;
                _this.loadingSendBack = false;
                _this.getTableList();
              } else {
                resolve();
                _this.$message.error(message);
                _this.loadingSendBack = false;
              }
            }, 1000);
          }).catch(() => console.log("Oops errors!"));
        },
        onCancel() {
          _this.loadingSendBack = false;
        },
      });
    },
    //结算
    onSubmitCredited() {
      this.loading = true;
      let _this = this;
      this.$confirm({
        title: `确定要结算申请编号为${_this.modalData.rechargeCode}的订单?`,
        cancelText: "取消",
        okText: "确定",
        onOk() {
          return new Promise((resolve) => {
            setTimeout(async () => {
              let { code, message } = await recharge_settlement(
                _this.modalData
              );
              if (code === "10000") {
                resolve();
                _this.visible = false;
                _this.loading = false;
                _this.getTableList();
              } else {
                resolve();
                _this.$message.error(message);
                _this.loading = false;
              }
            }, 1000);
          }).catch(() => console.log("Oops errors!"));
        },
        onCancel() {
          _this.loading = false;
        },
      });
    },
    //显示每一行账单详情
    async showModal(record) {
      let { code, responseBody } = await recharge_info(record.id);
      if (code === "200") {
        this.visible = true;
        //计算汇率
        this.exchangeRate =
          responseBody.settlementCurrencyRate / responseBody.currencyRate;
        //计算实际结算金额
        responseBody.settlementCost = responseBody.cost * this.exchangeRate;
        this.modalData = responseBody;
      }
    },
  },
  computed: {
    columns() {
      if (this.port != "client") {
        return [
          {
            title: "申请编号",
            dataIndex: "rechargeCode",
            align: "center",
            scopedSlots: { customRender: "rechargeCode" },
            width: "8%",

            //  fixed: "left",
          },
          {
            title: "客户编号",
            dataIndex: "tenantId",
            align: "center",
            scopedSlots: { customRender: "tenantId" },
            width: "8%",
          },
          {
            title: "类型",
            dataIndex: "type",
            align: "center",
            width: "9%",
          },
          {
            title: "申请币种",
            dataIndex: "currency",
            scopedSlots: { customRender: "currency" },
            align: "center",
            width: "8%",
            // ellipsis: true,
          },
          {
            title: "申请金额",
            dataIndex: "cost",
            scopedSlots: { customRender: "cost" },
            align: "center",
            width: "9%",
          },

          {
            title: "申请时间 ",
            dataIndex: "createTime",
            align: "center",
            width: "9%",
            scopedSlots: { customRender: "createTime" },
            // ellipsis: true,
          },
          {
            title: "结算时间 ",
            dataIndex: "settlementTime",
            align: "center",
            width: "9%",
            scopedSlots: { customRender: "settlementTime" },
            // ellipsis: true,
          },
          {
            title: "申请人 ",
            dataIndex: "createByName",
            align: "center",
            width: "10%",
            scopedSlots: { customRender: "createByName" },
            // ellipsis: true,
          },
          {
            title: "状态 ",
            dataIndex: "state",
            align: "center",
            width: "10%",
            scopedSlots: { customRender: "state" },
            // ellipsis: true,
          },
          {
            title: "备注 ",
            dataIndex: "remark",
            align: "center",
            width: "12%",
            scopedSlots: { customRender: "remark" },
            // ellipsis: true,
          },
          {
            title: "操作",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            align: "center",
            width: 100,
            fixed: "right",
          },
        ];
      } else {
        return [
          {
            title: "申请编号",
            dataIndex: "rechargeCode",
            align: "center",
            scopedSlots: { customRender: "rechargeCode" },
            width: "10%",

            //  fixed: "left",
          },
          {
            title: "类型",
            dataIndex: "type",
            align: "center",
            width: "10%",
          },
          {
            title: "申请币种",
            dataIndex: "currency",
            scopedSlots: { customRender: "currency" },
            align: "center",
            width: "10%",
            // ellipsis: true,
          },
          {
            title: "申请金额",
            dataIndex: "cost",
            scopedSlots: { customRender: "cost" },
            align: "center",
            width: "10%",
          },

          {
            title: "申请时间 ",
            dataIndex: "createTime",
            align: "center",
            width: "9%",
            scopedSlots: { customRender: "createTime" },
            // ellipsis: true,
          },
          {
            title: "结算时间 ",
            dataIndex: "settlementTime",
            align: "center",
            width: "9%",
            scopedSlots: { customRender: "settlementTime" },
            // ellipsis: true,
          },
          {
            title: "申请人 ",
            dataIndex: "createByName",
            align: "center",
            width: "10%",
            scopedSlots: { customRender: "createByName" },
            // ellipsis: true,
          },
          {
            title: "状态 ",
            dataIndex: "state",
            align: "center",
            width: "10%",
            scopedSlots: { customRender: "state" },
            // ellipsis: true,
          },
          {
            title: "备注 ",
            dataIndex: "remark",
            align: "center",
            width: "15%",
            scopedSlots: { customRender: "remark" },
            // ellipsis: true,
          },
          {
            title: "操作",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            align: "center",
            width: 100,
            fixed: "right",
          },
        ];
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>